<script setup lang="ts">
import { ref } from 'vue';
import Taro, { showToast } from '@tarojs/taro';
import { ERROR_MSG_DURATION } from '@/constants';
import { localStg } from '@/utils';
import type { FileInfo, Suggestion } from '@/interface';
import { getRequestUrl, showErrorMsg } from '@/service/request/helpers';
import { delSuggestPicture, saveSuggestion } from '@/service/api/suggestion';

const formRef = ref();
const suggestionForm = ref<Suggestion>({ type: 1, content: '' });
const show = ref<boolean>(false);
const columns = ref([
  { text: '改进意见', value: '1' },
  { text: '产品缺陷', value: '2' }
]);
const val = ref<string[]>(['1']);

const onfocus = () => {
  if (suggestionForm.value.type) {
    val.value[0] = `${suggestionForm.value.type}`;
  }
};

const onConfirm = () => {
  suggestionForm.value.type = Number(val.value[0]);
  show.value = false;
};

const uploaded = ref<FileInfo>();
const headers = ref({ Authorization: localStg.get('token') });

const onSave = () => {
  Taro.showLoading({ title: '反馈中...' });
  suggestionForm.value.pictureId = uploaded.value?.id;
  saveSuggestion(suggestionForm.value)
    .then(() => {
      Taro.hideLoading();
      showToast({
        title: '反馈成功',
        icon: 'success',
        duration: ERROR_MSG_DURATION
      });
      Taro.navigateBack({
        delta: 1
      });
      if (formRef.value) {
        formRef.value.reset();
      }
    })
    .catch((err: Service.RequestError) => {
      Taro.hideLoading();
      showErrorMsg(err.message);
      if (uploaded.value?.id) {
        delSuggestPicture(uploaded.value?.id);
      }
    });
};

const onDeleted = () => {
  if (uploaded.value?.id) {
    delSuggestPicture(uploaded.value?.id);
  }
};

const onUploadSuccess = (data: any) => {
  uploaded.value = JSON.parse(data.data.data).data;
};

const onUploadFailure = () => {
  onDeleted();
};
</script>

<template>
  <basic-layout :show-tab-bar="false">
    <custom-nav-bar left-show title="意见反馈" />
    <div class="w-375px text-30px text-primary bg-#fafafa"></div>
    <nut-form ref="formRef" star-position="right" :model-value="suggestionForm" label-position="top">
      <nut-form-item label="问题类型" prop="type" required :rules="[{ required: true, message: '请选择问题类型' }]">
        <nut-input
          v-model="columns[Number(val[0]) - 1].text"
          placeholder=""
          type="text"
          :border="false"
          readonly
          @click="show = true"
          @focus="onfocus"
        />
        <nut-popup :visible="show" position="bottom">
          <nut-picker v-model="val" :columns="columns" title="问题类型" @cancel="show = false" @confirm="onConfirm" />
        </nut-popup>
      </nut-form-item>
      <nut-form-item label="反馈内容" prop="content" required :rules="[{ required: true, message: '请填写反馈内容' }]">
        <textarea
          v-model="suggestionForm.content"
          placeholder=" "
          class="bg-#f7f8fa h-100px w-100% b-rd-5px right-4px left-1px"
        />
      </nut-form-item>
      <nut-form-item label="产品截图">
        <nut-uploader
          ref="uploaderRef"
          :source-type="['album']"
          maximum="1"
          :url="getRequestUrl('/admin/suggest/upload')"
          :headers="headers"
          @success="onUploadSuccess"
          @failure="onUploadFailure"
          @delete="onDeleted"
        ></nut-uploader>
      </nut-form-item>
    </nut-form>
    <nut-button plain class="hoo-btn hoo-btn--confirm" block @click="onSave">提交</nut-button>
  </basic-layout>
</template>

<style lang="scss">
@import '@/styles/custom';
</style>
